<template>
  <uv-popup
    ref="popupRef"
    mode="center"
    :round="16"
    :closeable="true"
    :close-icon-pos="['top-right']"
   
    @close="handleClose"
  >
    <view class="cancel-reason-modal" style="width: 600rpx;">
      <!-- 标题 -->
      <view class="modal-header">
        <text class="modal-title">取消原因</text>
      </view>

             <!-- 取消原因选项 -->
       <view class="reason-options">
         <uv-radio-group v-model="selectedReason">
           <view
             v-for="(reason, index) in cancelReasons"
             :key="index"
             class="reason-item"
             @click="selectReason(reason.value)"
           >
             <uv-radio
               :name="reason.value"
               :label="reason.label"
               :disabled="false"
               size="18"
               active-color="#1890FF"
               inactive-color="#ddd"
             />
           </view>
         </uv-radio-group>
       </view>

      <!-- 其他原因输入框 -->
      <view v-if="selectedReason === 'other'" class="other-reason-input">
        <uv-textarea
          v-model="otherReasonText"
          placeholder="请输入其他原因..."
        />
      </view>

      <!-- 提交按钮 -->
      <view class="submit-section">
        <uv-button
          text="提交反馈"
          size="large"
          :color="'#FF6B35'"
          custom-style="width: 100%; height: 88rpx; border-radius: 44rpx; font-size: 32rpx; font-weight: 600;"
          @click="handleSubmit"
        />
      </view>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'

  // 定义组件事件
  interface Emits {
    (e: 'close'): void
    (e: 'submit', reason: string): void
  }

  const emit = defineEmits<Emits>()

  // popup 引用
  const popupRef = ref()

  // 取消原因选项
  const cancelReasons = ref([
    { value: 'dont_want', label: '不想要了' },
    { value: 'too_far_slow_urgent', label: '距离太远,时间太慢,用油太急' },
    { value: 'wrong_order', label: '下错单了(地址填错,信息填错)' },
    { value: 'other', label: '其他原因' }
  ])

  // 选中的原因
  const selectedReason = ref('')
  // 其他原因文本
  const otherReasonText = ref('')

  // 打开弹窗
  const open = () => {
    popupRef.value?.open()
    // 重置选择
    selectedReason.value = ''
    otherReasonText.value = ''
  }

  // 关闭弹窗
  const close = () => {
    popupRef.value?.close()
  }

  // 暴露方法给父组件
  defineExpose({
    open,
    close
  })

  // 选择原因
  const selectReason = (value: string) => {
    selectedReason.value = value
  }

  // 关闭弹窗
  const handleClose = () => {
    emit('close')
  }

  // 提交反馈
  const handleSubmit = () => {
    if (!selectedReason.value) {
      uni.showToast({
        title: '请选择取消原因',
        icon: 'none'
      })
      return
    }

    if (selectedReason.value === 'other' && !otherReasonText.value.trim()) {
      uni.showToast({
        title: '请输入其他原因',
        icon: 'none'
      })
      return
    }

    // 构建提交的原因文本
    let submitReason = ''
    if (selectedReason.value === 'other') {
      submitReason = otherReasonText.value.trim()
    } else {
      const selectedReasonObj = cancelReasons.value.find(
        (item) => item.value === selectedReason.value
      )
      submitReason = selectedReasonObj ? selectedReasonObj.label : ''
    }

    // 发送事件
    emit('submit', submitReason)

    // 关闭弹窗
    emit('close')
  }
</script>

<style lang="scss" scoped>
           .cancel-reason-modal {
      padding: 32rpx;
      background: linear-gradient(to bottom, #fff6e8, #f8f9fa);
      border-radius: 12rpx;
      border: 1rpx solid #e0e0e0;
    }

     .modal-header {
     text-align: center;
     margin-bottom: 32rpx;

     .modal-title {
       font-size: 32rpx;
       font-weight: 600;
       color: #333;
     }
   }

     .reason-options {
     margin-bottom: 40rpx;

     .reason-item {
       margin-bottom: 20rpx;
       padding: 16rpx 20rpx;
       background: #fff;
       border: 1rpx solid #e0e0e0;
       border-radius: 8rpx;
       transition: all 0.2s ease;

       &:last-child {
         margin-bottom: 0;
       }

       &:hover {
         border-color: #1890FF;
         background: #f8f9fa;
       }

       :deep(.uv-radio) {
         .uv-radio__label {
           font-size: 28rpx;
           color: #333;
           line-height: 1.4;
           font-weight: 400;
         }

         .uv-radio__icon {
           margin-right: 16rpx;
         }
       }
     }
   }

     .other-reason-input {
     margin-bottom: 40rpx;

     :deep(.uv-textarea) {
       .uv-textarea__field {
         min-height: 100rpx;
         padding: 16rpx;
         background: #fff;
         border: 1rpx solid #e0e0e0;
         border-radius: 8rpx;
         font-size: 28rpx;
         color: #333;
         line-height: 1.4;
       }

       .uv-textarea__count {
         font-size: 24rpx;
         color: #999;
         margin-top: 8rpx;
         text-align: right;
       }
     }
   }

     .submit-section {
     .uv-button {
       box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.2);
       transition: all 0.2s ease;
       border: none;

       &:active {
         transform: translateY(1rpx);
         box-shadow: 0 1rpx 4rpx rgba(255, 107, 53, 0.3);
       }
     }
   }
</style>
